<template>
  <div class="hello"> 

    <h1>{{ msg }}</h1>

    <div v-if="seen">
      <a :href="url">这是一条连接</a>
      <input v-model="msg" />
      <br/><br/>
      <button @click="dosomething" >点我</button>
    </div>

    <div v-if="seen">
      {{msg | show}}
    </div>

    <ul v-if="seen">
      <li v-for="num in items" v-bind:key="num">
          {{num.name}}
      </li>
    </ul>

    <button @click="counter += 1 ">{{counter}}</button>

  </div>
  
</template>

<script>
export default {
  name: 'hello',
  data(){
    return{
      msg: 'Welcome to Siqing Kingdom!',
      url:"http://www.baidu.com",
      seen:false,
      counter:0,
      items:[
        {
          name:111
        },
        {
          name:2222
        },
        {
          name:3333,
        },
      ],
    }
  },
  methods:{
   
    dosomething:function() {
      alert("hhhhh!i do it!");
    },

    show:function(v){
      if(v){
        alert(v);
      }
      else{
        alert('');
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.class_{
  background-color: red;
  color:red;
}
</style>
